@extends('layout.master')

@section('content-header')
    <h1>Lokasi</h1>
    <ol class="breadcrumb">
        <li><a href="{{ URL::route('dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="{{ URL::route('lokasis') }}"><i class="fa fa-map-marker"></i> Lokasi</a></li>        
        <li class="active"><i class="fa fa-home"></i>{{ $lokasi->nama }}</li>        
        <li class="active"><i class="fa fa-group"></i>Penduduk</li>
    </ol>
@stop

@section('content')
<style type="text/css">
    #available-penduduks-table tbody tr{      
        cursor: pointer;  
    }
</style>

<!-- Modal -->
<div class="modal fade modal-wide" id="available-penduduks-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Penduduk</h4>
            </div>
            
            <div class="modal-body">

                <div class="row">
                    <div id="box-filter" class="col-md-12 no-padding">
                        <ul class="list-unstyled clearfix">
                            <li class="col-xs-2">
                                <input type="text" id="modal_fl_nik" class="form-control input-sm" placeholder="NIK"/>
                            </li>                            
                            <li class="col-xs-2">
                                <input type="text" id="modal_fl_no_kk" class="form-control input-sm" placeholder="No KK"/>
                            </li>                            
                            <li class="col-xs-2">
                                <select id="modal_fl_jk" class="form-control input-sm">
                                    <option value="">Semua Jenis kelamin</option>                                    
                                    <option value="L">Laki</option>                                    
                                    <option value="P">Perempuan</option>                                    
                                </select>
                            </li>                                                        
                        </ul>
                        <div class="collapse-toggle"><a href="#" id="sc-collapse" class="info-tooltip" data-original-title="Toggle Search Collapse"><i class="fa fa-angle-double-up"></i></a></div>                    
                    </div>
                </div>
                <div class="row">
                    <div id="box-result" class="col-md-12">
                        <table id="available-penduduks-table" class="table table-bordered">
                            <thead>
                                <tr class="center">
                                    <th>#</th>
                                    <th>NIK</th>
                                    <th>No KK</th>
                                    <th>Nama</th>
                                    <th>Jenis Kelamin</th>
                                    <th>Pekerjaan</th>                                    
                                    <th>Status keluarga</th>                            
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>

            <div class="modal-footer">                
                <button type="button" class="btn btn-sm btn-primary btn-save-penduduks"><i class="fa fa-floppy-o"></i> Simpan</button>
                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Tutup</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal -->
<div class="modal fade modal-wide" id="kk-penduduks-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Kartu Keluarga</h4>
            </div>
            
            <div class="modal-body">                

            </div>

            <div class="modal-footer">                                
                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Tutup</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">{{ $lokasi->nama }}</h3>                
            </div>
            <div class="box-body table-responsive">
                <div class="row">
                    <div class="col-md-12">
                        <div class="callout callout-info animated fadeIn">                                                        
                            <table>
                                <tr>
                                    <td><i class="fa fa-user"></i> Pemilik</td>                                    
                                    <td>:</td>
                                    <td><a href="{{ URL::route('penduduks.show', $lokasi->penduduk_id) }}" target="_blank">{{ $pemilik->nama }}</a></td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-th-large"></i> Jenis</td>
                                    <td>:</td>
                                    <td>{{ $lokasi->tipe->nama }}</td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-location-arrow"></i> Alamat</td>
                                    <td>:</td>
                                    <td>{{ $lokasi->alamat }}</td>
                                </tr>
                            </table>                            
                        </div>
                    </div>
                </div>
                <div class="row">        
                    <div class="col-md-12">
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary add-penduduk"><i class="fa fa-plus-square"></i> Tambah Penduduk</a>                            
                        </div>                
                    </div>                            
                </div>                

                <div class="row top10">
                    <div id="box-filter" class="col-md-12 no-padding">
                        <ul class="list-unstyled clearfix">
                            <li class="col-xs-2">
                                <input type="text" id="fl_nik" class="form-control input-sm" placeholder="NIK"/>
                            </li>                            
                            <li class="col-xs-2">
                                <input type="text" id="fl_no_kk" class="form-control input-sm" placeholder="No KK"/>
                            </li>                            
                            <li class="col-xs-2">
                                <select id="fl_jk" class="form-control input-sm">
                                    <option value="">Semua Jenis kelamin</option>                                    
                                    <option value="L">Laki</option>                                    
                                    <option value="P">Perempuan</option>                                    
                                </select>
                            </li>                                                        
                        </ul>
                        <div class="collapse-toggle"><a href="#" id="sc-collapse" class="info-tooltip" data-original-title="Toggle Search Collapse"><i class="fa fa-angle-double-up"></i></a></div>                    
                    </div>

                </div>                
                <div class="box-result">
                    <table id="all-penduduks-table" class="table table-bordered">
                        <thead>
                            <tr class="center">
                                <th>#</th>
                                <th>NIK</th>
                                <th>No KK</th>
                                <th>Nama</th>
                                <th>Jenis Kelamin</th>
                                <th>Pekerjaan</th>                                    
                                <th>Status keluarga</th>                            
                                <th>Hapus</th>                            
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    // globals var
    var modal_fl_nik = "";
    var modal_fl_no_kk = "";
    var modal_fl_jk = "";    
    var fl_nik = "";
    var fl_no_kk = "";
    var fl_jk = "";    
    var allTable = null;
    var availableTable = null;
    var myTableRowSelected = [];

    $(function() {        
        /**
         * Available Penduduks (Modal) Data table
         *          
         */
        availableTable = $('#available-penduduks-table').dataTable({
            "aoColumns": [
                { "bSearchable": true, "bSortable": true, "bVisible": false },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true},                
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true }                
            ],
            "aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
            "iDisplayLength": 50,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "{{ URL::route('lokasis.available.penduduks', $lokasi->id) }}",
            "bPaginate": true,
            "bSort": true,
            "bAutoWidth": false,
            "fnServerData": function( sSource, aoData, fnCallback ){                           
                aoData.push( 
                    { "name" : "fl_nik", "value" : modal_fl_nik },
                    { "name" : "fl_no_kk", "value" : modal_fl_no_kk },
                    { "name" : "fl_jk", "value" : modal_fl_jk }
                );                
                $.getJSON( sSource, aoData, function (json) {
                    fnCallback(json);                        
                });
            }
        });
        
        $('#available-penduduks-table tbody').on('click', 'tr', function(event) {
            event.preventDefault();

            var aData = availableTable.fnGetData( this );
            var iId = aData[0];
            
            if ( jQuery.inArray(iId, myTableRowSelected) == -1 )
            {
                myTableRowSelected[myTableRowSelected.length++] = iId;
            }
            else
            {
                myTableRowSelected = jQuery.grep(myTableRowSelected, function(value) {
                    return value != iId;
                } );
            }   

            $(this).toggleClass('row-selected');
        });

        /**
         * Filtering          
         */
        $('#available-penduduks-modal').on('change', '#modal_fl_nik', function(event) {
            modal_fl_nik = $(this).val();      
            availableTable.fnReloadAjax();              
        });

        $('#available-penduduks-modal').on('change', '#modal_fl_no_kk', function(event) {
            modal_fl_no_kk = $(this).val();
            availableTable.fnReloadAjax();
        });                

        $('#available-penduduks-modal').on('change', '#modal_fl_jk', function(event) {
            modal_fl_jk = $(this).val();
            availableTable.fnReloadAjax();
        });        

        /**
         * End of Filtering
         */
        
        /**
         * Mapping Penduduk         
         */
        $('.btn-save-penduduks').click(function(event) {
            event.preventDefault();

            var current = $(this);

            if(myTableRowSelected.length == 0) {
                bootbox.alert("Anda belum memilih penduduk.");
            }else{                

                $(current).find('i').removeClass('fa-floppy-o').addClass('fa-refresh fa-spin');

                $.ajax({
                    url: "{{ URL::route('lokasis.mapping.penduduks', $lokasi->id) }}",
                    type: 'post',                    
                    data: {
                        selectedId : myTableRowSelected
                    },
                    success: function(result) {
                        $(current).find('i').removeClass('fa-refresh fa-spin').addClass('fa-floppy-o');
                        $('#available-penduduks-modal').modal('hide');
                        allTable.fnReloadAjax();
                        availableTable.fnReloadAjax();
                    }
                });
                
            }            
        });        

        /**
         * Un Mapping Penduduk
         */
        $('#all-penduduks-table').on('click', '.btn-remove', function(event) {
            event.preventDefault();
            
            var pendudukId = $(this).data('penduduk-id');

            var promise = $.ajax({
                url: "{{ URL::route('lokasis.unmapping.penduduk', $lokasi->id) }}",
                type: 'post',                
                data: {
                    pendudukId : pendudukId
                }                
            });
            promise.done(function(data){
                allTable.fnReloadAjax();
                availableTable.fnReloadAjax();
            });
        });            

        /**
         * End of Available Penduduks Data table
         */
        
        /**
         * All Penduduks Data table
         * 
         */
        allTable = $('#all-penduduks-table').dataTable({
            "aoColumns": [
                { "bSearchable": true, "bSortable": true, "bVisible": false },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true},                
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true },
                { "sClass": "text-center", "bSearchable": true, "bSortable": false }                
            ],
            "aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
            "iDisplayLength": 50,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "{{ URL::route('lokasis.all.penduduks', $lokasi->id) }}",
            "bPaginate": true,
            "bSort": true,
            "bAutoWidth": false,
            "fnServerData": function( sSource, aoData, fnCallback ){                           
                aoData.push( 
                    { "name" : "fl_nik", "value" : fl_nik },
                    { "name" : "fl_no_kk", "value" : fl_no_kk },
                    { "name" : "fl_jk", "value" : fl_jk }
                );                
                $.getJSON( sSource, aoData, function (json) {
                    fnCallback(json);                        
                });
            }
        });

        /**
         * Filtering          
         */
        $('.box-body').on('change', '#fl_nik', function(event) {
            fl_nik = $(this).val();      
            allTable.fnReloadAjax();              
        });

        $('.box-body').on('change', '#fl_no_kk', function(event) {
            fl_no_kk = $(this).val();
            allTable.fnReloadAjax();
        });                

        $('.box-body').on('change', '#fl_jk', function(event) {
            fl_jk = $(this).val();
            allTable.fnReloadAjax();
        });        

        /**
         * End of Filtering
         */

        /**
         * End of All Penduduks Data table
         */
        
        $('.add-penduduk').click(function(event) {
            event.preventDefault();

            $('#available-penduduks-modal').modal('show');
        });        

        $('#available-penduduks-modal').on('shown.bs.modal', function (e) {
            $('#modal_fl_nik').focus();
        });

        $('#all-penduduks-table').on('click', '.btn-no-kk', function(event) {
            event.preventDefault();
            
            var no_kk = $(this).html();
            var promise =  $.ajax({
                url: "{{ URL::route('penduduks.perkk') }}",
                type: 'post',                
                data: {
                    no_kk: no_kk
                }
            });

            promise.done(function(data){
                $('#kk-penduduks-modal').find('.modal-body').html(data);
                $('#kk-penduduks-modal').modal('show');                                        
            });
        });
    });
</script>
@stop